<template>
  <div class="app-container">
    <!-- 学科管理-学科 -->
    <div class="top">
      <el-form ref="form" :model="form" label-width="80px" :inline="true">
        <el-form-item label="学科名称">
          <el-input v-model="form.subjectName" placeholder="请输入学科名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="medium" @click="clear">清除</el-button>
          <el-button type="primary"  size="medium" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-button type="success" icon="el-icon-edit" @click="dialogOpen">新增学科</el-button>
    </div>
    <!-- 提示内容 -->
    <div class="alert">
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        :closable="false"
        show-icon>
      </el-alert>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="subjectName" label="学科名称" width="150"></el-table-column>
      <el-table-column prop="username" label="创建者" width="150"></el-table-column>
      <el-table-column prop="addDate" label="创建日期" width="200">
        <template #default="{row}">
          {{getTime(row.addDate)}}
        </template>
      </el-table-column>
      <el-table-column prop="isFrontDisplay" label="前台是否显示" width="150">
        <template #default="{row}">
          {{`${row.isFrontDisplay ? '是' : '否'}`}}
        </template>
      </el-table-column>
      <el-table-column prop="twoLevelDirectory" label="二级目录" width="150"></el-table-column>
      <el-table-column prop="totals" label="题目数量" width="150"></el-table-column>
      <el-table-column label="操作" >
        <template #default="{row}">
          <el-button type="text" @click="subClass">学科分类</el-button>
          <el-button type="text" @click="subTags">学科标签</el-button>
          <el-button type="text" @click="update(row.id)">修改</el-button>
          <el-button type="text" @click="del(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗 -->
    <add-dialog ref="dialog" :dialog-visible="visible" @close-dialog="dialogClose" @get-list="getTableData" :dialog-title="dialogTitle"></add-dialog>
    <!-- 分页器 -->
    <div class="bottom">
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="form.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="form.pagesize"
      layout="prev, pager, next, sizes, jumper"
      :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {getList, delSubject} from '@/api/subjects'
import AddDialog from '@/views/subjects/list/components/add-dialog.vue'
import {parseTime} from '@/utils/index.js'
export default {
  name: 'List',
  components: {
    AddDialog
  },
  data() {
    return {
      form: {
        page: 1,//当前页数
        pagesize: 10,
        subjectName: ''
      },
      total: 0,
      tableData:[ ],
      visible: false,
      dialogTitle: '',
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    // 获取表格数据
    async getTableData() {
      const res = await getList(this.form)
      // console.log('学科',res);
      this.total = res.counts
      this.tableData = res.items
    },
    // 每页条数改变
    handleSizeChange(size) {
      this.form.pagesize = size
      this.getTableData()
    },
    // 当前页改变
    handleCurrentChange(page) {
      this.form.page = page
      this.getTableData()
    },
    // 搜索按钮
    search() {
      this.getTableData(this.form)
    },
    clear() {
      this.form={
        page: 1,//当前页数
        pagesize: 10,
        subjectName: ''
      }
      this.getTableData()
    },
    // 新增按钮
    dialogOpen() {
      this.dialogTitle = '新增学科'
      this.visible = true
    },
    // 关闭弹窗
    dialogClose() {
      this.visible = false
    },
    // 修改
    update(id) {
      this.dialogTitle = '修改学科'
      // 打开弹出弹窗
      this.visible = true
      // 调子组件的方法
      this.$refs.dialog.getDetail(id)
    },
    // 删除
    del(id) {
      // 询问用户
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          // 删除接口
          await delSubject(id)
          // 提示用户
          this.$message.success('删除成功')
          // 刷新列表
          this.getTableData()
        })
    },
    // 时间
    getTime(time) {
      return parseTime(time)
    },
    // 学科分类
    subClass() {
      this.$router.push('/subject/directorys')
    },
    subTags() {
      this.$router.push('/subject/tags')
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #fff;
  margin: 10px;
  .top {
    display: flex;
    justify-content: space-between;
  }
  .bottom {
    margin-top: 10px;
    display: flex;
    justify-content: right;
  }
  .alert {
    margin:20px 0;
  }
}
</style>